import './index.scss'
import { Card, Button, Checkbox, Form, Input, message } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { useStore } from "@/store"
import { useNavigate } from 'react-router-dom'
import LoginApi from './api/loginApi';
import { useState } from 'react';
const loginApi = new LoginApi()

function Login() {
    // 获取登录业务
    const { loginStore } = useStore()
    // 编程式导航
    const navigate = useNavigate()

    const [checked, setChecked] = useState(false);


    // 登录
    const onFinish = (values: any) => {

        if (!checkRem()) {
            return
        }

        let params = {
            username: values.username,
            password: values.password
        }
        loginApi.login(params).then((res) => {
            if (res) {
                localStorage.setItem('t', res.token)
                // 路由跳转，编程式导航,不保存当前页面
                navigate('/', { replace: true })
                message.success('登录成功')
            }
        })
    };

    // 检查是否选中协议
    const checkRem = () => {
        if (checked) {
            return true
        } else {
            message.error('请阅读用户协议')
            return false
        }
    }

    const onChange = (e: CheckboxChangeEvent) => {
        setChecked(e.target.checked);
    };

    const onFinishFailed = (errorInfo: any) => {
        // console.log('Failed:', errorInfo);

        checkRem()
    };

    return (
        <div className='login'>
            <Card title="登录" bordered={false} style={{ width: 500, textAlign: 'center', borderRadius: '15px', backgroundColor: 'rgba(255,255,255,.8)' }}>
                <Form
                    name="basic"
                    labelAlign='left'
                    labelCol={{ span: 4 }}
                    style={{ maxWidth: 500, textAlign: 'left' }}
                    initialValues={{ remember: false, username: '', password: '' }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"

                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名' }]}
                    >
                        <Input allowClear maxLength={20} />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password allowClear maxLength={20} />
                    </Form.Item>

                    <Checkbox checked={checked} onChange={onChange}>我已阅读《用户协议》</Checkbox>
                    <div style={{ width: '100%', textAlign: 'center' }}>
                        <Button type="primary" htmlType="submit" style={{ width: '100px', borderRadius: '10px' }}>
                            登录
                        </Button>
                    </div>
                </Form>
            </Card>
        </div >
    )
}

export default Login